<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationStyle": "custom"
  }
}
</route>

<script lang="ts" setup>
// 引入必要的组件
import { reactive, ref } from 'vue'
import { getUser } from '@/api/user'

interface UserInfo {
  avatar: string
  account: string
  collectionNumber: number
  likeNumber: number
  score: number
  couponNumber: number

}
// 用户数据
const userInfo = reactive<UserInfo>({
  avatar: '', // 用户头像，这里使用默认头像
  account: '用户907456',
  collectionNumber: 0,
  likeNumber: 0,
  score: 0,
  couponNumber: 0,
})
// 调用接口
onLoad(() => {
  getUser().then((res) => {
    console.log(res)
    userInfo.avatar = res.data.avatar
    userInfo.account = res.data.account
    userInfo.collectionNumber = res.data.collectionNumber
    userInfo.likeNumber = res.data.likeNumber
    userInfo.score = res.data.score
    userInfo.couponNumber = res.data.couponNumber
  }).catch((err) => {
    console.log(err)
  })
})

// 订单统计数据
const orderStats = ref([
  { status: '待付款', count: 0, icon: '/static/user/paid.svg' },
  { status: '待发货', count: 2, icon: '/static/user/shipped.svg' },
  { status: '待收货', count: 0, icon: '/static/user/received.svg' },
  { status: '已完成', count: 0, icon: '/static/user/finished.svg' },
])

// 快捷工具数据
const quickTools = ref([
  { name: '我的问诊', icon: '/static/user/tool-01.svg' },
  { name: '我的处方', icon: '/static/user/tool-02.svg' },
  { name: '家庭档案', icon: '/static/user/tool-03.svg' },
  { name: '地址管理', icon: '/static/user/tool-04.svg' },
  { name: '我的评价', icon: '/static/user/tool-05.svg' },
  { name: '官方客服', icon: '/static/user/tool-06.svg' },
  { name: '设置', icon: '/static/user/tool-07.svg' },
])
// 快捷工具页面跳转
function goToPage(page: string) {
  if (page === '我的问诊') {
    console.log('跳转到页面:', page)
  }
  else if (page === '我的处方') {
    console.log('跳转到页面:', page)
  }
  else if (page === '家庭档案') {
    console.log('跳转到页面:', page)
  }
  else if (page === '地址管理') {
    console.log('跳转到页面:', page)
  }
  else if (page === '我的评价') {
    console.log('跳转到页面:', page)
  }
  else if (page === '官方客服') {
    console.log('跳转到页面:', page)
  }
  else if (page === '设置') {
    console.log('跳转到页面:', page)
    uni.navigateTo({
      url: '/pages/ShortcutTools/settings',
    })

  }
}
</script>

<template>
  <scroll-view scroll-y>
    <view class="user-container">
      <!-- 用户信息区域 -->
      <view class="user-info">
        <view class="avatar-container flex">
          <img class="h-138rpx w-138rpx rounded-50%" :src="userInfo.avatar" alt="">
          <view class="user-name">
            <view>
              {{ userInfo.account }}
            </view>
            <view class="text-left">
              <img class="h-24rpx w-24rpx" src="/static/user/edit.svg" alt="">
            </view>
          </view>
        </view>

        <view class="user-stats">
          <view class="stat-item">
            <view class="stat-number">
              {{ userInfo.collectionNumber }}
            </view>
            <view class="stat-name">
              收藏
            </view>
          </view>
          <view class="stat-item">
            <view class="stat-number">
              {{ userInfo.likeNumber }}
            </view>
            <view class="stat-name">
              关注
            </view>
          </view>
          <view class="stat-item">
            <view class="stat-number">
              {{ userInfo.score }}
            </view>
            <view class="stat-name">
              积分
            </view>
          </view>
          <view class="stat-item">
            <view class="stat-number">
              {{ userInfo.couponNumber }}
            </view>
            <view class="stat-name">
              优惠券
            </view>
          </view>
        </view>
      </view>

      <!-- 药品订单区域 -->
      <view class="order-section">
        <view class="section-title">
          <view class="order-title">
            药品订单
          </view>
          <view class="view-all">
            全部订单 &gt;
          </view>
        </view>
        <view class="order-types">
          <view v-for="(item, index) in orderStats" :key="index" class="order-type-item">
            <wot-badge :value="item.count">
              <view class="order-icon">
                <image :src="item.icon" class="h-54rpx w-54rpx" />
              </view>
            </wot-badge>
            <view class="order-name">
              {{ item.status }}
            </view>
          </view>
        </view>
      </view>

      <!-- 快捷工具区域 -->
      <view class="tools-section">
        <view class="section-title">
          快捷工具
        </view>
        <view class="tools-grid">
          <view v-for="(tool, index) in quickTools" :key="index" class="tool-item" @click="goToPage(tool.name)">
            <view class="tool-item-left">
              <img class="h-40rpx w-40rpx" :src="tool.icon" alt="">
              <view>{{ tool.name }}</view>
            </view>
            <view class="tool-item-right">
              <img class="h-40rpx w-40rpx" src="../../static/user/arrow.svg" alt="">
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.user-container {
  // padding: 0 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.nav-bar {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.user-name {
  margin-left: 23rpx;
  margin-top: 15rpx;
  color: #000000;
  font-family: PingFang SC;
  font-weight: medium;
  font-size: 36rpx;
  line-height: normal;
  letter-spacing: -0.3rpx;
  text-align: center;
}
.nav-title {
  font-size: 36rpx;
  font-weight: bold;
}
.order-section {
  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 22rpx 0rpx #e5e5e533;
  margin: 30rpx;
  padding: 30rpx;
}
.user-info {
  border-radius: 20rpx;
  padding: 40rpx 25rpx;
  padding-top: 100rpx;
  text-align: center;
  background: linear-gradient(180deg, #2cb5a575 0%, #2cb5a500 100%);
}

.avatar-container {
  margin-bottom: 40rpx;
}

.user-stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-number {
  color: #000000;
  font-family: DIN Condensed;
  font-weight: bold;
  font-size: 48rpx;
  line-height: 48rpx;
  letter-spacing: 0rpx;
  text-align: center;
}

.stat-name {
  color: #979797;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 24rpx;
  line-height: 34rpx;
  letter-spacing: 0rpx;
  text-align: center;

  margin-top: 10rpx;
}
.tools-section {
  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 0px 0px 22rpx 0px #e5e5e533;
  margin: 0 30rpx;
  padding-top: 30rpx;
  padding-left: 30rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-title {
  color: #000000;
  font-family: PingFang SC;
  font-weight: medium;
  font-size: 32rpx;
  line-height: 48rpx;
  letter-spacing: 0rpx;
  text-align: center;
}
.view-all {
  color: #c3c3c5;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 26rpx;
  line-height: 48rpx;
  letter-spacing: 0rpx;
  text-align: left;
}

.doctor-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 16rpx;
  background-color: #f0f9ff;
}

.doctor-info {
  flex: 1;
  margin-left: 20rpx;
}

.doctor-name {
  font-size: 28rpx;
  font-weight: bold;
}

.doctor-title,
.doctor-hospital {
  font-size: 24rpx;
  color: #666;
  margin-top: 6rpx;
}

.enter-btn {
  margin-left: 20rpx;
}

.order-types {
  display: flex;
  justify-content: space-around;
}

.order-type-item {
  text-align: center;
}

.order-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10rpx;
  color: #1989fa;
}

.order-name {
  font-size: 24rpx;
  color: #666;
}

.tools-grid {
}
.tool-item-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-left: 25rpx;
}
.tool-item-right {
  margin-right: 20rpx;
}
.tool-item {
  text-align: center;
  padding: 20rpx 0;
  display: flex;
  justify-content: space-between;
}

.tool-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: #f0f9ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10rpx;
  color: #1989fa;
}

.tool-name {
  font-size: 24rpx;
  color: #666;
}
</style>
